<template>
  <div>
    <headers title="分类"></headers>
    <van-row>
      <van-col span="6">
        <van-sidebar v-model="active">
          <van-sidebar-item
            v-for="(v, i) in list"
            :key="i"
            :title="v.cat_name"
          />
        </van-sidebar>
      </van-col>
      <van-col span="18">
        <div v-for="(v, i) in list[active]?.children" :key="i">
          <div>
            {{ v.cat_name }}
          </div>
          <van-grid :border="false" :column-num="3">
            <van-grid-item v-for="(val, index) in v.children" :key="index">
              <van-image :src="val.cat_icon" @click="onsearch(v.cat_name)" />
            </van-grid-item>
          </van-grid>
        </div>
      </van-col>
    </van-row>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { categoriesApi } from "@/api/api";
import { useRoute, useRouter } from "vue-router";
import headers from "@/components/header.vue";
const router = useRouter();
const route = useRoute();

const active = ref(0);
const list = ref([]);
const catFun = () => {
  categoriesApi().then((res) => {
    list.value = res.data.message;
  });
};
catFun();

const onsearch = (name) => {
  router.push({ path: "/search", query: { name: name } });
};
</script>

<style lang="scss" scoped></style>
